<template>
  <div>
    <Top title="登录"></Top>
  
    <div class="content">
      <div class="phone">
        <input type="text" placeholder="请输入手机号" v-model="phoneNum" />
      </div>

      <div class="phone">
        <input type="password" placeholder="请输入密码" v-model="passWord" />
      </div>

      <div class="loginBtn" @click="login">登录</div>

      <div class="res">
        <router-link to="/login/msglogin">
          <div>验证码登录</div>
        </router-link>

        <router-link to="/passwordrecovery">
          <div>找回密码</div>
        </router-link>

        <router-link to="/login/resgister">
          <div>快速注册</div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Top from "@/views/login/top";
import { Toast } from 'vant';
import 'vant/es/toast/style';
import {login} from "@/common/api/login";
import {mapMutations} from 'vuex'

export default {
  data() {
    return {
      phoneNum: "",
      passWord: "",
      pattern: /^[0-9]*$/,
      //   验证规则
      rules: {
        // 手机号验证
        userTel: {
          rule: /^1[123456789]\d{9}$/,
          msg: "手机号不能为空，并且为11位数字",
        },
        // 密码验证
        userPwd: {
          rule: /^\w{6,12}$/,
          msg: "密码不能为空，并且要求6到12位",
        },       
      },
    };
  },
  methods: {
     ...mapMutations(['loginSetInofo']),
      login() {
            if(!this.rules.userTel.rule.test(this.phoneNum)){
                 return   Toast(this.rules.userTel.msg);               
            }
            if(!this.rules.userPwd.rule.test(this.passWord)){
                 return   Toast(this.rules.userPwd.msg);               
            }

            // 发送请求后端验证
            login(this.phoneNum,this.passWord).then(res=>{
              
              Toast(res.data.data.msg); 
              // 存储用户信息
              this.loginSetInofo(res.data.data.data)
             
              // 跳转到我的页面
              this.$router.push({path:'/my'})

              
            
             
            })
  
        },
  },
  mounted() {

  },
  components: {
    Top,
  },
  beforeCreate() {
    // 生成背景颜色
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f5f5f5");
  },
};
</script>

<style scoped lang='scss'>
input {
  height: 44px;
  font-size: 0.3415rem;
  color: black;
  border: 1px solid #d7d7d7;
  border-radius: 1vw;
  padding: 0 2vw;
  box-sizing: border-box;
}
.content {
  box-sizing: border-box;
  padding: 0.4878rem;
  .phone {
    margin-bottom: 5vw;
    display: flex;
    input {
      width: 100%;

      height: 44px;
    }
  }
  .msg {
    display: flex;
    margin-bottom: 5vw;
    input {
      flex: 1;
    }
    button {
      background-color: #b0352f;
      color: white;
      font-size: 0.3659rem;
      border: none;
      border-radius: 1vw;
      padding: 0 2vw;
    }
  }
  .loginBtn {
    margin-bottom: 5vw;
    width: 100%;
    background-color: #b0352f;
    color: white;
    font-size: 0.4878rem;
    border: none;
    border-radius: 1vw;
    padding: 3vw 0;
  }
  .res {
    font-size: 0.3415rem;
    color: #222;
    display: flex;
    justify-content: space-between;
    span {
      color: #b0352f;
    }
  }
}
</style>